/**
 * Created by yzdd on 2018/6/1.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';
import {line, publicStyle, width} from "../utils/publiscStyle";
import {observer} from "mobx-react";
import {AddLesseeStore} from "../logics/AddLesseeStore";

const styles = StyleSheet.create({
  icon1: {
    width: 18,
    height: 18,
    marginLeft: 15,
    marginRight: 15
  },
  item: {
    width,
    height: 48,
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: line,
    borderBottomColor: "#EEEEEE",
    paddingRight: 15,
    backgroundColor: "#FFFFFF"
  },
  inputItem: {
    flex: 1,
    fontSize: 16,
    padding: 0
  },
  inputView: {
    flex: 1,
  },
  inputMulItem: {
    textAlignVertical: 'top',
    fontSize: 16,
    paddingTop: 0,
    flex: 1
  },
  itemMul: {
    width,
    height: 160,
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    paddingTop: 15
  },
  leftView: {
    width: 48,
    height: 160,
    alignItems: "center"
  },
  inputMulView: {
    flex: 1,
  },
  subBtn: {
    width,
    height: 48,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#1AAD19"
  },
  font5: {
    fontSize: 16,
    color: "#FFFFFF"
  }
});

let companyIcon = require('../assets/company.png');
let phoneIcon = require("../assets/phone.png");
let emailIcon = require("../assets/email.png");
let memoIcon = require("../assets/memo.png");
const items = [
  {name: "company", icon: companyIcon, placeholder: "公司名称"},
  {name: "phone", icon: phoneIcon, placeholder: "联系人电话"},
  {name: "email", icon: emailIcon, placeholder: "邮箱"},
]

//添加承租人
@observer
export default class AddLessee extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: "查看承租人"
    }
  }

  addLesseeStore = new AddLesseeStore();

  componentDidMount() {
    this.addLesseeStore.company = "放牛完研发中心";
    this.addLesseeStore.phone = "0515-26598741";
    this.addLesseeStore.email = "xiniu@funew.net";
    this.addLesseeStore.memo = "请尽早处理完成";
  }

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={{flex: 1}}>
          {
            items.map((v, i) => {
              return (
                <View style={styles.item} key={i}>
                  <Image
                    source={v.icon}
                    resizeMode={"contain"}
                    style={styles.icon1}
                  />
                  <View style={styles.inputView}>
                    <TextInput
                      placeholder={v.placeholder}
                      style={styles.inputItem}
                      placeholderTextColor={"#999999"}
                      value={this.addLesseeStore[v.name]}
                      onChangeText={(text) => this.addLesseeStore[v.name] = text}
                      underlineColorAndroid="transparent"
                      editable={true}
                    />
                  </View>
                </View>
              )
            })
          }
          <View style={styles.itemMul}>
            <View style={styles.leftView}>
              <Image
                source={memoIcon}
                resizeMode={"contain"}
                style={styles.icon1}
              />
            </View>
            <View style={styles.inputMulView}>
              <TextInput
                placeholder={"备注"}
                style={styles.inputMulItem}
                placeholderTextColor={"#999999"}
                underlineColorAndroid="transparent"
                value={this.addLesseeStore.memo}
                multiline={true}
                onChangeText={(text) => this.addLesseeStore.memo = text}
                editable={true}
              />
            </View>
          </View>
        </View>
      </View>
    );
  }
}